<template>
  <div id="page" class="mainBody">
    <div class="mainTop clearfix">
      <span class="iconfont collapse_btn" :class="[isCollapse ? 'collBtnOn icon-spread-left' : 'icon--icon-spread-left']" @click="changeColl"></span>
      <div class = "breadcrumb">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-show="parentNavName !== ''">{{parentNavName}}</el-breadcrumb-item>
          <el-breadcrumb-item v-show="currentTabName !== ''">{{currentTabName}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="user">
        <div class="username">
          <i class = "icon_user"></i>
          {{username}}
        </div>
        <ul class = "func">
          <li @click="logout">退出登录</li>
        </ul>
      </div>
      <span class="iconfont icon-quanping expand_btn" v-show="!isExpand" @click="changeExpand"></span>
      <span class="iconfont icon-shouqiquanping expand_btn" v-show="isExpand" @click="changeExpand"></span>
    </div>
    <div class="mainLeft" :class="[isCollapse ? 'mainLeftOn' : '']">
        <div class = "mainTitle">
          <span class="logo">
          </span>
          <span v-if="!isCollapse">毕业生数据可视化</span>
        </div>
        <el-menu
            default-active=""
            class="el-menu-vertical"
            @open="handleOpen"
            @close="handleClose"
            background-color="#001529"
            text-color="#fff"
            active-text-color="#fff"
            :collapse="isCollapse"
            router
          >
            <el-submenu :index="parent.id" v-for="parent in navMenu" :key="parent.id">
              <template slot="title">
                <i class="iconfont" :class="parent.icon"></i>
                <span>{{parent.name}}</span>
              </template>
              <el-menu-item :class="[child.id === currentTabId ? 'activeLi' : '']" v-for="child in parent.children" :key="child.id" :index="'/'+child.url" @click="createTabLi(child.id, child.name, child.url, parent.name)">
                <i class="iconfont" :class="child.icon"></i>
                <span slot="title">{{child.name}}</span>
              </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
    <div class="mainContent" :class="[isCollapse ? 'mainContentOn' : '']">
      <ul class="tab_title">
        <li v-for="(item, index) in survivalTabs" :key="index" @click="switchPage(item.id, item.tabName, item.routerUrl, item.parentName)" :class="[currentTabId === item.id ? 'tab_this' : '']">{{item.tabName}}<i class="el-icon-close el_icon" @click.stop="destoryTab(item.id, item.routerUrl, item.tabName, item.parentName)"></i></li>
      </ul>
      <div class="tab_content">
        <keep-alive :include="keepAliveList">
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'page',
  data () {
    return {
      isCollapse: true,
      isExpand: false,
      parentNavName: '',
      currentTabName: '',
      survivalTabs: [],
      currentTabId: '',
      navMenu: [
        {
          id: '1',
          name: '毕业生管理',
          icon: 'icon-biyeshengguanli',
          children: [
            { id: '12', url: 'dataAnalysis', name: '就业数据分析',icon: 'icon-shujufenxi'},
            { id: '13', url: 'infoMaintain', name: '毕业生信息维护',icon: 'icon-xinxiweihu'}
          ]
        },
        {
          id: '2',
          name: '论文管理',
          icon: 'icon-benkebiyelunwenxitong',
          children: [
            { id: '22', url: 'thesisUpload', name: '论文数据维护',icon: 'icon-lunwenzhuanlizhuanzhu' },
            { id: '23', url: 'hotTechnical', name: '热门技术分析',icon: 'icon-remen' },
            { id: '24', url: 'knowledgeGraph', name: '知识图谱',icon: 'icon-zhishitupu' }
          ]
        },
        {
          id: '3',
          name: '用户管理',
          icon: 'icon-yonghu',
          children: [
            { id: '31', url: 'userMaintain', name: '用户数据维护',icon: 'icon-yonghu' },
          ]
        }
      ],
      keepAliveList: [],
      username: ''
    }
  },
  mounted () {
    this.$router.push('/dataAnalysis')
    this.survivalTabs.push({ id: '12', tabName: '就业数据分析', routerUrl: 'dataAnalysis', parentName: '毕业生管理' })
    this.keepAliveList.push('/dataAnalysis')
    this.currentTabId = '12'
    this.currentTabName = '就业数据分析'
    this.parentNavName = '毕业生管理'

    this.username = localStorage.getItem("userName")||''
    var power = localStorage.getItem("power")||''
    if(power == "1"){
      var index = this.navMenu.findIndex((item)=>{
        return item.id === "3"
      })
      this.navMenu.splice(index,1)
    }
  },
  methods: {
    handleOpen (key, keyPath) {
    },
    handleClose (key, keyPath) {
    },
    /* 修改展开收起 */
    changeColl () {
      this.isCollapse = !this.isCollapse
    },
    /* 全屏 */
    fullScreen () {
      const elem = document.body
      if (elem.webkitRequestFullScreen) {
          elem.webkitRequestFullScreen()
      } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen()
      } else if (elem.requestFullScreen) {
          elem.requestFullscreen()
      } else {
          this.$message.error('浏览器不支持全屏API或已被禁用')
      }
    },
    /* 解除全屏 */
    exitFullScreen () {
      let elem = document
      if (elem.webkitCancelFullScreen) {
          elem.webkitCancelFullScreen()
      } else if (elem.mozCancelFullScreen) {
          elem.mozCancelFullScreen()
      } else if (elem.cancelFullScreen) {
          elem.cancelFullScreen()
      } else if (elem.exitFullscreen) {
          elem.exitFullscreen()
      } else {
          this.$message.error('浏览器不支持全屏API或已被禁用')
      }
    },
    /* 改变全屏状态 */
    changeExpand () {
      if (this.isExpand) {
        this.exitFullScreen()
      } else {
        this.fullScreen()
      }
      this.isExpand = !this.isExpand
    },
    /* 关闭组件 */
    destoryTab (id, url, tabName, parentName) {
      let index1 = this.survivalTabs.findIndex((item) => {
        return id === item.id
      })
      let index2 = this.keepAliveList.findIndex((item) => {
        return url === item
      })
      this.survivalTabs.splice(index1, 1)
      this.keepAliveList.splice(index2, 1)
      if (this.survivalTabs.length > 0) {
        // 关闭当前打开页面时跳转
        if(this.currentTabId === id){
          this.$router.push(this.survivalTabs[this.survivalTabs.length - 1].routerUrl)
          this.currentTabId = this.survivalTabs[this.survivalTabs.length - 1].id
          this.currentTabName = this.survivalTabs[this.survivalTabs.length - 1].tabName
          this.parentNavName = parentName
        }
      } else {
        this.$router.push('/welcome')
        this.parentNavName = ''
        this.currentTabName = ''
        this.currentTabId = ''
      }
    },
    /* 点击菜单生成tabLi */
    createTabLi (tabId, tabName, url, parentName) {
      let index = this.survivalTabs.findIndex((item) => {
        return tabId === item.id
      })
      if (index === -1) {
        this.survivalTabs.push({ id: tabId, tabName: tabName, routerUrl: url, parentName: parentName })
        this.keepAliveList.push(url)
      }
      this.currentTabId = tabId
      this.currentTabName = tabName
      this.parentNavName = parentName
      
    },
    switchPage (tabId, tabName, url, parentName) {
      if (this.currentTabId !== tabId) {
        this.$router.push(url)
        this.currentTabId = tabId
        this.currentTabName = tabName
        this.parentNavName = parentName
      }
    },
    /* 退出登录 */
    logout () {
      localStorage.removeItem("token");
      this.$router.push('/login')
    }
  }
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 400px;
}
.mainLeft .el-menu{
  border-right: 0;
}
.el-menu--vertical .el-menu .iconfont{
  padding-right: 10px;
  padding-left: 7px;
  color: #fff;
}
.el-menu--vertical .el-menu-item .iconfont 

{
  font-size: 16px;
}
.el-menu--vertical .el-menu .activeLi{
  color: red!important;
  background-color: #001121!important;
}
.el-menu--vertical .el-menu .activeLi .iconfont{
  color: red;
}
</style>
<style scoped>
.mainBody {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1200px;
}
/* 头部 */
.mainBody .mainTop {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-bottom: 1px solid #dcdee2;
  transition:all 0.3s;
}
.collapse_btn{
  margin-left: 242px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.collapse_btn:hover,.expand_btn:hover{
  opacity: .7;
}
.collBtnOn{
  margin-left: 95px;
}
.breadcrumb{
  display: inline-block;
  margin-left: 20px;
  vertical-align: text-top;
}
.user{
  position: relative;
  float: right;
  height: 100%;
  margin-right: 20px;
}
.user .username{
  position: relative;
  padding-right: 25px;
  cursor: pointer;
  height: 100%;
  font-size: 13px;
}
.user .username::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid dashed dashed;
    border-color: #fff transparent transparent;
    transition: all .2s;
    -webkit-transition: all .2s;
    position: absolute;
    top: 29px;
    right: 5px;
    margin-top: -3px;
    border-width: 6px;
    border-top-color: #666;
}
.user:hover .username::after{ 
  transform: rotate(180deg) translate(0,6px);
}
.user .icon_user{
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../assets/img/logo.png) no-repeat;
  background-size: 100% 100%;
  vertical-align: middle;
  margin-top: -8px;
  margin-right: 10px;
}
.user:hover .func{
  display: block;
}
.user .func{
  display: none;
  position: absolute;
  top: 84%;
  left: 0;
  width: 100%;
  border: 1px solid rgb(224, 224, 224);
  box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
  background-color: #fff;
  z-index: 100;
}
.user .func::before{
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: rotateZ(45deg);
  border-top: 1px solid rgb(224, 224, 224);
  border-left: 1px solid rgb(224, 224, 224);
  background-color: #fff;
  z-index: 4;
}
.user .func li{
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  text-align: center;
}
.user .func li:hover{
  opacity: .7;
}
.expand_btn{
  float: right;
  margin-right: 20px;
}
/* 左侧菜单栏 */
.mainBody .mainLeft{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 220px;
  overflow-y: auto;
  background:#001529;
  color: #fff;
  transition:all 0.3s;
}
.mainLeft .el-submenu .activeLi{
  color: red!important;
  background-color: #001121!important;
}
.mainLeft .el-submenu .activeLi .iconfont{
  color: red;
}
.mainBody .mainLeftOn{
  width: 70px;
}
.mainLeft .mainTitle{
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
}
.mainTitle .logo{
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  background: url(../assets/img/logo.png);
  background-size: 32px 32px;
  vertical-align: middle;
  border-radius: 50%;
}

/* 主要内容区 */
.mainBody .mainContent{
  position: absolute;
  left: 220px;
  right: 0;
  top: 60px;
  bottom: 0;
  transition:all 0.3s;
  background-color: #fff;
}
.mainBody .mainContentOn{
  left: 70px;
}
.tab_title{
  height: 40px;
  padding: 5px 10px;
  border-bottom: 1px solid #dcdee2;
}
.tab_title li{
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  margin-right: 10px;
  background-color: #f8f8f9;
  border: 1px solid #dcdee2;
  cursor: pointer;
  color:rgba(0,0,0,.8);
  border-radius: 3px;
  transition: all 0.5s;
}
.tab_title li:hover .el_icon{
  display: inline;
}
.tab_title li .el_icon{
  display: none;
  margin-left: 5px;
  color: rgba(0,0,0,.4);
}
.tab_title .tab_this .el_icon{
  color:#fff;
}
.tab_title .tab_this{
  background-color:#2ca077;
  color: #fff;
}
.mainContent .tab_content{
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 0;
  transition: all 0.5s;
}
.el-menu-vertical .iconfont{
  padding-right: 10px;
  padding-left: 7px;
  color: #fff;
}

/* 媒体查询 */
@media screen and (max-width: 1500px) {
  .mainBody .mainTop {
    height: 45px;
    line-height: 45px;
  }
  .mainLeft .mainTitle {
    height: 50px;
    line-height: 50px;
  }
  .user .username::after{
    top: 22px;
  }
  .mainBody .mainContent{
    top: 45px;
  }
}
</style>
